<template>
  <div class="tag-container">
    <el-tag
        style="margin-right: 10px;"
        v-for="tag in value"
        :key="tag"
        closable
        @close="close(tag)"
    >
      {{tag}}
    </el-tag>
    <div v-if="!visible" @click="visible = true" class="add-tag center-flex">+</div>
    <input @change="change" class="add-input" type="text" v-else>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        visible: false
      }
    },
    methods: {
      close(tag) {
        this.$emit('input', this.value.filter(item => String(item) !== String(tag)))
      },
      change({target: {value}}) {
        this.visible = false
        if (this.value.some((item) => String(item) === String(value)) || !value) return
        this.$emit('input', [...this.value, value])
      }
    }
  }
</script>

<style lang="scss">
  .tag-container {
    display: flex;
    align-items: center;
  }
  .add-tag {
    display: inline-block;
    width: 52px;
    height: 26px;
    padding: 0 8px;
    line-height: 22px;
    border: 1px dashed rgba(64,158,255,.2);
    border-radius: 4px;
    text-align: center;
    color: rgba(64,158,255,.2);
    cursor: pointer;
  }
  .add-input {
    height: 26px;
    padding: 0 8px;
    line-height: 22px;
    border: 1px solid rgba(64,158,255,.2);
    border-radius: 4px;
  }
</style>

